<div style="padding: 15px;">
    <table class="am-table am-table-striped am-table-hover center-table">
        <thead>
        <tr>
            <th width="80px">类型</th>
            <th width="160px">时间</th>
            <th>标题</th>
            <th width="80px">详情</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<style type="text/css">
    .center-table th, .center-table td {
        text-align: center;
    }
</style>

<script>
    var _list = [];
    CMD.notice_uquery(undefined, undefined, 40, 1, function(r) {
        var table = $(".center-table tbody");
        table.empty();
        _list = r.list;
        for (var i in r.list) {
            var d = r.list[i];
            var tr = $("<tr></tr>");

            if (d.type == '首页弹窗') tr.append("<td>公告</td>");
            else tr.append("<td>" + d.type + "</td>");
            tr.append("<td>" + d.time + "</td>");
            tr.append("<td>" + d.subject + "</td>");

            var td = $("<td class='oper' value='__id__'>详情</td>".replace(/__id__/, d.id));
            tr.append(td);
            table.append(tr);

            registerHover(td, d);
        }

        // 点击后显示详细内容
        $("td.oper").click(function(e) {
            var id = $(e.currentTarget).attr("value");
            for (var i in _list) {
                if (_list[i].id != id) continue;


                break;
            }
        });
    });

    function registerHover(td, data) {
        td.popover({
            content: data.content,
            trigger: 'hover',
        });
    }
</script>